<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url("https://fonts.googleapis.com/css?family=Lato");
			@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
			body {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  height: 100vh;
			  background: #222;
			}
			
			.staggered-rise-in {
			  position: relative;
			  display: flex;
			  white-space: pre;
			  overflow: hidden;
			}
			.staggered-rise-in span {
			  transform: translateY(100%);
			  animation: rise-in 1s forwards;
			}
			
			@keyframes rise-in {
			  to {
			    transform: translateY(-12%);
			  }
			}
			header .title,
			header .subtitle {
			  width: 250px;
			  height: 50px;
			  color: white;
			}
			header .title {
			  font-family: Lora, serif;
			  font-size: 32px;
			  line-height: 50px;
			}
			header .subtitle {
			  margin-top: 10px;
			  font-family: Lato, sans-serif;
			  font-size: 12px;
			  line-height: 30px;
			  letter-spacing: 5px;
			  text-transform: uppercase;
			}
		</style>
	</head>
	<body>
		<header>
		  <h1 class="title staggered-rise-in">守住自己的内心</h1>
		  <p class="subtitle staggered-rise-in">才能走向更广阔的天地 ​​​​</p>
		</header>
	</body>
</html>
<script>
	"use strict";
	let staggeredRiseInTexts = document.querySelectorAll(".staggered-rise-in");
	staggeredRiseInTexts.forEach(text => {
	    let letters = text.textContent.split("");
	    text.textContent = "";
	    letters.forEach((letter, i) => {
	        let span = document.createElement("span");
	        span.textContent = letter;
	        span.style.animationDelay = `${i / 20}s`;
	        text.append(span);
	    });
	});
</script>